<template>
	<view class="content">
		<!-- <top-userinfo ref="topuserinfo" :parentData="false"></top-userinfo> -->
		<view class="my-shop-hd">
			<view class="user-info">
				<uni-list :border="false">
					<!-- <uni-list-chat :avatar-circle="true" title="董嘎嘎" avatar="/static/img/img.png" note="18661988000"></uni-list-chat> -->
					<uni-list-chat :avatar-circle="true" :title="userusername == null ? '暂无' : userusername"
					 avatar="/static/img/img.png" :note="usermobile == null ? '暂无' : usermobile"
					  v-if="useravatar == '' || useravatar == null"></uni-list-chat>
					<uni-list-chat  :title="userusername == null ? '暂无' : userusername"
					 :avatar="useravatar" :note="usermobile == null ? '暂无' : usermobile" v-else></uni-list-chat>
				</uni-list>
			</view>
			<view class="my-card">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text>今日兑换比例 {{exchangeproportion(shopinfoarr.exchange_proportion)+'%'}}</text>
					<uni-icons type="help-filled" size="16" @click="toggle('center')"></uni-icons>
					<uni-popup ref="popup" background-color="#fff">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<text class="text">{{exchange_desc}}</text>
						</view>
					</uni-popup>
				</view>
				<!-- <navigator class="instructions" url="">刷新全部信息</navigator> -->
			</view>
		</view>
		
		<view class="uni-padding-wrap">
			<view class="bg-radius" style="margin-top: 30rpx;">
				<view class="uni-flex uni-row">
					<uni-section class="cus-parallel-tit uni-center" :title="shopinfoarr.money" titleFontSize="28rpx" titleColor="#111"
					sub-title="会员余额" subTitleFontSize="23rpx" subTitleColor="#999">
					</uni-section>
					<uni-section class="cus-parallel-tit uni-center" :title="shopinfoarr.score" titleFontSize="28rpx" titleColor="#111"
					sub-title="兑换余额" subTitleFontSize="23rpx" subTitleColor="#999">
						<template v-slot:right v-if="shopinfoarr.support_discount == 1">
							<uni-icons type="help-filled" size="16" color="#f5c481" @click="toggle3('center')"></uni-icons>
						</template>
						<uni-popup ref="popup3" background-color="#fff">
							<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
								<text class="text" 
								v-if="shopinfoarr.exchange_expire == null || shopinfoarr.exchange_expire == 0 || shopinfoarr.exchange_expire==''">您的兑换余额用完或已过期</text>
								<text class="text" v-else>您的兑换余额将于 {{shopinfoarr.exchange_expire}} 过期</text>							
							</view>
						</uni-popup>
					</uni-section><!-- 
					<uni-section class="cus-parallel-tit uni-center" :title="shopinfoarr.card == null ? '0' : '1'" titleFontSize="28rpx" titleColor="#111"
					sub-title="超级抵现卡(张)" subTitleFontSize="23rpx" subTitleColor="#999">
					</uni-section> -->
					<uni-section class="cus-parallel-tit uni-center" :title="shopinfoarr.total_score" titleFontSize="28rpx" titleColor="#111"
					sub-title="已用兑换余额" subTitleFontSize="23rpx" subTitleColor="#999">
					</uni-section>
					<uni-section class="cus-parallel-tit uni-center" :title="shopinfoarr.loop_rule.reward" 
					titleFontSize="28rpx" titleColor="#111"
					sub-title="未入账余额" subTitleFontSize="23rpx" subTitleColor="#999"
					 v-if="shopinfoarr.support_loop == 1">
						<template v-slot:right v-if="shopinfoarr.support_loop == 1">
							<uni-icons type="help-filled" size="16" color="#f5c481" @click="toggle2('center')"></uni-icons>
						</template>
					</uni-section>
					<uni-section class="cus-parallel-tit uni-center" title="0"
					titleFontSize="28rpx" titleColor="#111"
					sub-title="未入账余额" subTitleFontSize="23rpx" subTitleColor="#999" v-else>
						<!-- <template v-slot:right>
							<uni-icons type="help-filled" size="16" color="#f5c481" @click="toggle2('center')"></uni-icons>
						</template> -->
					</uni-section>
					<uni-popup ref="popup2" background-color="#fff">
						<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
							<text class="text">{{gift_desc}}</text>
						</view>
					</uni-popup>
				</view>
			</view>
			<view class="uni-flex uni-row uni-padding-wrap code" style="padding: 0 16rpx;">
				<view class="flex-item"><img src="/static/img/vip.png" mode="widthFix" alt="" /></view>
				<view class="flex-item">
					<input type="text" class="uni-input fonts" disabled v-model="check_code" placeholder="点击刷新核验码"/>
				</view>
				<view class="flex-item">
					<view class="code-btn fonts" @click="getuser_check_code">
						刷新核验码
					</view>
				</view>
			</view>
			<view class="member-profile">
				<swiper class="swiper2" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<view class="profile">
							<view class="profile-info">
								<!-- <text>抵现卡数量：暂无</text> -->
								<text>特权卡名称：{{cardinfo != null ? cardinfo.name : '暂无'}}</text>
								<text>{{shopinfoarr.shop.card_desc != null ? shopinfoarr.shop.card_desc : '距下次免费领取'}}：{{cardinfo != null ? cardinfo.interval : '暂无'}}</text>
								<text>有效期截止：{{cardinfo != null ? cardinfo.expire_time : '暂无'}}</text>
								<!-- <text>抵现卡状态：{{cardinfo != null ? (cardinfo.is_expire == 1 ? '已过期' : '有效') : '暂无'}}</text> -->
							</view>
							<view class="swiper-item">
								<img src="https://m.qpic.cn/psc?/89b9a87a-bf34-461a-b3f4-c9d87dfe5e02/LiySpxowE0yeWXwBdXN*SSQeaq3vZJx5ca9ihYDZTSnUnUdGofkce.1kz*0GbwCqmbexltlVpzJDn*pIqJjM1gzamHGBkY*4U2d7RONdp3o!/b&bo=WgJ1AVoCdQEDFzI!&rf=viewer_4"
								 mode="widthFix" alt="" /></view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="profile">
							<view class="profile-info">
								<!-- <text>抵现卡数量：暂无</text> -->
								<text>抵现卡兑换余额：{{shopinfoarr.score}}</text>
								<!-- <text>核销间隔（天）：14</text> -->
								<text>有效期截止：{{shopinfoarr.exchange_expire}}</text>
								<!-- <text>抵现卡状态：暂无</text> -->
							</view>
							<view class="swiper-item">
								<img src="https://m.qpic.cn/psc?/89b9a87a-bf34-461a-b3f4-c9d87dfe5e02/LiySpxowE0yeWXwBdXN*SeB0PHzbVoqO.8s5bemryOfrPIG8OpwhdYct6MIQSorBjq*whoJH7JAWIkrqFOzlJigN1vNnbDqysotoNxVq6gg!/b&bo=WgJ1AVoCdQEDByI!&rf=viewer_4"
							 mode="widthFix" alt="" />
							 </view>
						</view>
					</swiper-item>
					
				</swiper>
			</view>
			
			<view class="bg-radius">
				<!-- 店铺宫格 -->
				<uni-grid class="grid" :showBorder="false" :square="false">
					<uni-grid-item class="pd-30">
						<view class="grid-item-box" @click="goto_record_consumption">
							<view class="grid-icon xfjl">
								<uni-icons fontFamily="CustomFont" :size="25">{{'\ue830'}}</uni-icons>
							</view>
							<text class="text">消费记录</text>
						</view>
					</uni-grid-item>
					<uni-grid-item class="pd-30">
						<view class="grid-item-box" @click="goto_recharge_record">
							<view class="grid-icon czjl">
								<uni-icons fontFamily="CustomFont" :size="25">{{'\ue832'}}</uni-icons>
							</view>
							<text class="text">充值记录</text>
						</view>
					</uni-grid-item>
					<uni-grid-item class="pd-30">
						<view class="grid-item-box" @click="goto_write_off_record_total">
							<view class="grid-icon hxjl">
								<uni-icons fontFamily="CustomFont" :size="25">{{'\ue833'}}</uni-icons>
							</view>
							<text class="text">核销记录</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="bg-radius">
				<!-- 商家资料 -->
				<view class="shop-info">
					<view class="shop-info-box">
						<view class="piclist_title">
							商家照片（{{shopinfoarr.shop.lifephoto.length}}）
						</view>
						<!-- 店铺图片 -->
						<swiper class="swiper" :indicator-dots="true">
							<swiper-item v-for="(item,index) in piclist" :key="index">
								<uni-grid :column="3" :showBorder="false" :highlight="true">
									<uni-grid-item v-for="(items, indexs) in item" :index="indexs" :key="indexs">
										<view class="grid-item-box">
											<image :src="items.url" class="image" mode="aspectFill" @click="showpic(index,indexs)" />
											<!-- <text class="text">{{ items.text }}</text> -->
										</view>
									</uni-grid-item>
								</uni-grid>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="bg-radius" v-if="shopinfoarr.shop.goods_photo != null && shopinfoarr.shop.goods_photo != ''">
				<!-- 特价商品 -->
				<view class="shop-info">
					<view class="shop-info-box">
						<view class="piclist_title">
							{{shopinfoarr.shop.goods_photo_name == '' ? '特价商品' : shopinfoarr.shop.goods_photo_name}}
							（{{shopinfoarr.shop.goods_photo.length}}）
						</view>
						<!-- 店铺图片 -->
						<swiper class="swiper" :indicator-dots="true">
							<swiper-item v-for="(item,index) in pic_googdsphoto_list" :key="index">
								<uni-grid :column="3" :showBorder="false" :highlight="true">
									<uni-grid-item v-for="(items, indexs) in item" :index="indexs" :key="indexs">
										<view class="grid-item-box">
											<image :src="items.url" class="image" mode="aspectFill" @click="showpropic(index,indexs)" />
											<!-- <text class="text">{{ items.text }}</text> -->
										</view>
									</uni-grid-item>
								</uni-grid>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="bg-radius">
				<!-- 商家资料 -->
				<view class="shop-info">
					<view class="shop-info-box">
						<view class="info-title">
							商家信息
						</view>
						<view class="distance" @click="gotomap">	
							<text v-if="isNumber(shopinfoarr.distance)"> 距离:{{shopinfoarr.distance}}公里</text>
							<text v-else> 距离:{{shopinfoarr.distance}}</text>
							<image src="../../static/img/iconlaction.png" mode="aspectFill"></image>
						</view>
						<view class="beforestyle">
							<uni-list>
								<uni-list-item title="商家店名：" :note="''+shopinfoarr.shop.shop_name"></uni-list-item>
								<uni-list-item title="商家地址：" :note="''+(shopinfoarr.shop.address == '' ? '暂无' : shopinfoarr.shop.address)"></uni-list-item>
								<uni-list-item title="营业时间：" :note="shopinfoarr.shop.business_start_time+'至'+shopinfoarr.shop.business_end_time"></uni-list-item>
								<uni-list-item title="商家电话：" :note="''+shopinfoarr.shop.mobile"></uni-list-item>
							</uni-list>
						</view>
					</view>
				</view>
			</view>
			<!-- 粉丝社群 -->
			<view class="fan-community">
				<text class="fan-community-hd"></text>
				<view class="fan-community-box">
					<view class="box-hd">
						<view class="" v-if="shopinfoarr.shop.avatar">
							<swiper class="swiper3" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item  v-for="(item,index) in shopinfoarr.shop.avatar" :key="index"
								 v-if="shopinfoarr.shop.avatar.length>=1" @click="showpicwx(index)" >
									<img class="" mode="widthFix" :src="item" alt=""/>
								</swiper-item>
								<swiper-item v-else>
									<img class="" mode="widthFix" src="../../static/img/img.png" alt=""/>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="box-bd">
						<text>您好，欢迎加入我们的粉丝群，我们将在群里不定期的发送现金红包，以及不定期组织赠送粉丝福利的活动！</text>
						<text>长按左侧图片可扫描二维码</text>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		
		
		
		<!-- ///////////////////// 旧版内容 勿删！！///////////////////// -->
		<!-- <view class="">
			<view class="weui-media-box_appmsg" style="none">
				<view class="weui-media-box__hd">
					<img class="weui-media-box__thumb" src="/static/img/img.png" alt="" v-if="useravatar == '' || useravatar == null" />
					<img class="weui-media-box__thumb" :src="useravatar" alt="" v-else />
				</view>
				<view class="weui-media-box__bd my-shop-bd">
					<view class="weui-media-box__title">
						<text class="name">{{userusername}}</text> 
						<navigator class="name-edit" @click="name_edit"><i class="icon-edit-square"></i></navigator>
					</view>
					<text class="phone" @click="openDialog" v-if="usermobile == '' || usermobile == null">
						点击绑定手机号
					</text>
					<text class="phone" v-else>
						{{usermobile}}
						<navigator class="phone-edit" @click="gobindpone"><i class="icon-edit-square"></i></navigator>
					</text>
				</view>
			</view>
			<view class="my-card weui-media-box_appmsg">
				<view class="my-card-icon">
					<uni-icons type="vip" size="30"></uni-icons>
				</view>
				<view class="my-card-info">
					<text class="">我的超级抵现卡</text>
					<text class="weui-cell__desc">兑换金额当钱花</text> 
				</view>
				<navigator class="instructions weui-btn weui-btn_mini">特权使用说明</navigator>
			</view>
			<view class="tag-view">
				<uni-tag :circle="true" text="超级特权会员" type="success" size="normal" />
			</view>
			<uni-popup ref="nameDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"
				mode="input"
				title="编辑姓名"
				v-model="changeusername"
				placeholder="请输入你要编辑的姓名"
				@confirm="dialogInputConfirm">
				</uni-popup-dialog>
			</uni-popup>
		</view> -->
		<return-fab ref="returnfab"> </return-fab>
	</view>
</template>

<script>
	import {getuserget_check_code,userreload,getgift_describe,getexchange_describe,userget_shop_detail,shopcommongetallprovinces,userset_name,shopcommongetallcity,userchange_city,shopapply} from "@/api/apiinfo";
	import returnfab from './../../components/returnfab.vue';
	export default {
		components:{
			"return-fab":returnfab
		},
		data() {
			// components: {}, 
		    return {
		      pickerRange: [], // 存储省市区数据
		      selectedProvince: '请选择', // 当前选择的省份
		      selectedCity: '', // 当前选择的城市
			  
			  addressinfo: [],
			  storageAdd: [0,0],
			  addressvalue:'',
			  postdata:{
			  	province:'',//省份
			  	city:'',//城市
			  	address:'',//店面详细地址
			  },
			  shopnumber:0,
			  usermobile:'',
			  userusername:'',
			  usernickname:'',
			  useravatar:'',
			  
			  changeusername:'',
			  // 店铺筛选
			  value: "",
			  range: [
			    { value: 0, text: "全部" },
			    { value: 1, text: "胖姐烧烤" },
			    { value: 2, text: "瑞幸咖啡" },
			  ],
			  shopid:0,
			  shopinfoarr:{
				  shop:{
					avatar:[],
					exchange_proportion:'',
					lifephoto:[],
					card_desc:null
				  },
				  loop_rule:{}
			  },
			  piclist:[[]],
			  pic_googdsphoto_list:[[]],
			  dynamicList: [],
			  
			  type:'',
			  
			  cardinfo:null,
			  gift_desc:'',
			  exchange_desc:'',
			  
			  // swiper
			  indicatorDots: true,
			  autoplay: false,
			  interval: 2000,
			  duration: 500,
			  
			  check_code:'',
			 
		    };
		  },
		   
		  mounted() { ////////////////// uni组件样式重定义 
				
				  
				this.$nextTick(() => {
					
					
					// let query1 = uni.createSelectorQuery().in(this).selectAll(".uni-list-chat__header").boundingClientRect();
					// console.log(query1)
					// Array.prototype.forEach.call(query1, function(headerImage){
					// 	console.log(headerImage)
					// 	headerImage.style.borderRadius = "50%"; 
					// });
					
					// let query2 = uni.createSelectorQuery().in(this).select(".uni-list-chat__header-image")
					// Array.prototype.forEach.call(query2, function(headerImage){
					// 		headerImage.style.margin = "0";
					// });
					// let query3 = uni.createSelectorQuery().in(this).select(".uni-list-chat__content-title")
					// Array.prototype.forEach.call(query3, function(headerImage){
					// 		headerImage.style.color = "#fff";
					// });
					// let query4 = uni.createSelectorQuery().in(this).select(".uni-list-chat__content-note")
					// Array.prototype.forEach.call(query4, function(headerImage){
					// 		headerImage.style.color = "#fff";
					// });
					// let query5 = uni.createSelectorQuery().in(this).select(".uni-list-item__container")
					// Array.prototype.forEach.call(query5, function(headerImage){
					// 		headerImage.style.padding = "10px 15px";
					// });
					// let query6 = uni.createSelectorQuery().in(this).select(".uni-list-item__content-note")
					// Array.prototype.forEach.call(query6, function(headerImage){
					// 		headerImage.style.color = "#101010";
					// 		headerImage.style.fontSize = "14px";
					// });
				
				})
				
				//   var str = document.getElementsByClassName("uni-list-chat__header");
				//   Array.prototype.forEach.call(str, function(headerImage){
				// 	headerImage.style.borderRadius = "50%";
				//   });
		  // 		var str = document.getElementsByClassName("uni-list-chat__header-image");
		  // 		Array.prototype.forEach.call(str, function(headerImage){
		  // 			headerImage.style.margin = "0";
		  // 		});
				// var str = document.getElementsByClassName("uni-list-chat__content-title");
				// Array.prototype.forEach.call(str, function(contentTitle){
				// 	contentTitle.style.color = "#fff";
				// });
				// var str = document.getElementsByClassName("uni-list-chat__content-note");
				// Array.prototype.forEach.call(str, function(contentNote){
				// 	contentNote.style.color = "#fff";
				// });
				// var str = document.getElementsByClassName("uni-list-item__container");
				// Array.prototype.forEach.call(str, function(listItemContainer){
				// 	listItemContainer.style.padding = "10px 15px";
				// });
				// var str = document.getElementsByClassName("uni-list-item__content-note");
				// Array.prototype.forEach.call(str, function(contentNote){
				// 	contentNote.style.color = "#101010";
				// 	contentNote.style.fontSize = "14px";
				// });
		  },
		  
		  onShow() {
			//	console.log('显示onshow:'+localStorage.getItem('shopnumber'))
			// this.shopnumber = localStorage.getItem('shopnumber');
			// this.userusername = localStorage.getItem('username');
			// let user_name = localStorage.getItem('username')
			// if(user_name == '' || user_name == null){
			// 	user_name = localStorage.getItem('nickname')
			// }
			// this.userusername = user_name;
			// console.log(this.userusername)
			
			// this.getuserreload()//重新加载当前登录的用户数据
			
			// // this.shopid = localStorage.getItem('shopid');
			// this.shopid = this.$route.query.id;
			// this.shopinfo()
			// this.getgetgift_describe()//赠送金额使用.说明
			// this.getgetexchange_describe()//兑换比例使用说明
		  },
		  onLoad(option) {
			  
			 
			  
			  this.getuserreload()//重新加载当前登录的用户数据
			  console.log(JSON.stringify(option))
			  // this.shopid = localStorage.getItem('shopid');
			  console.log(JSON.parse(decodeURIComponent(option.id)))
			  this.shopid = JSON.parse(decodeURIComponent(option.id))//this.$route.query.id;
			  this.shopinfo()
			  this.getgetgift_describe()//赠送金额使用.说明
			  this.getgetexchange_describe()//兑换比例使用说明
			  
			  // this.shopid = 51;// this.$route.query.id;
		    // this.initPicker();
			// this.getshopcommongetallprovinces();
			// this.shopinfo()
			// {province: 37, city: 84}
			// localStorage.setItem('userToken', 'k29rv2ozQHQJkb4qLEbLCTm087Th5A1lsWCdoMpiqFVeiamh');
			// localStorage.setItem('province', JSON.stringify({
			// 	"id": 37,
			// 	"name": "河北省"
			// }));
			// localStorage.setItem('city', JSON.stringify({
			// 	"id": 84,
			// 	"name": "邯郸市"
			// }));
			// localStorage.setItem('username', '于金鹏'); //上线后需删除
			// localStorage.setItem('mobile', '13295458250');//上线后需删除
			
			// this.userusername = localStorage.getItem('username');
			// this.changeusername = localStorage.getItem('username');
			// this.usernickname = localStorage.getItem('nickname');
			// this.useravatar = localStorage.getItem('avatar');
			// this.usermobile = localStorage.getItem('mobile');
			// let provincearr = localStorage.getItem('province');
			// let cityarr = localStorage.getItem('city');
			// if(provincearr != null && provincearr != ''){
			// 	provincearr = JSON.parse(provincearr);
			// 	cityarr = JSON.parse(cityarr);
			// 	console.log(JSON.stringify(provincearr))
			// 	this.storageAdd[0] = provincearr.id;
			// 	this.storageAdd[1] = cityarr.id;
			// 	this.addressvalue = provincearr.name;
			// 	this.addressvalue += ' - '+cityarr.name;
			// }
			
			// this.shopnumber = localStorage.getItem('shopnumber');
			// this.shopinfo()
		  },
		methods: {
			isNumber(value) {
			    return typeof value === 'number';
			},
			gotomap(){
				console.log(this.shopinfoarr.shop.longitude)
				console.log(this.shopinfoarr.shop.latitude)
				if(this.shopinfoarr.shop.longitude){
					uni.navigateTo({ //内部页面跳转方式
						url: '/pages/shop/map?longitude='+this.shopinfoarr.shop.longitude+'&latitude='+this.shopinfoarr.shop.latitude+'&shopname='+this.shopinfoarr.shop.shop_name,
					})
				}				
			},
			getuser_check_code(){
				getuserget_check_code().then((res) => {
					console.log("getuserget_check_code接口返回数据：")
					console.log(JSON.stringify(res));
					if(res.data){
						this.check_code = res.data
					}else{
						uni.showToast({
							title: '暂无核验码',
							icon: 'none'
						});
					}
					
					
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			getuserreload(){//重新加载当前登录的用户数据
				userreload().then((res) => {
					console.log("userreload接口返回数据：")
					console.log(JSON.stringify(res));
					// this.userRedata = res.data
					let user_name = res.data.realname//localStorage.getItem('username')
					if(user_name == '' || user_name == null){
						user_name = res.data.nickname//localStorage.getItem('nickname')
					}
					this.userusername = user_name;
					this.useravatar = res.data.avatar;
					this.usermobile = res.data.mobile;
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			exchangeproportion(num){ //转换百分比
				console.log(num)
				if(num){
					return parseFloat(num) * 100
				}else{
					return 0
				}
				
			},
			goto_record_consumption(){
				console.log('跳转:')
				
				let urls = this.$timestamp('/pages/shop/record_consumption?id='+this.shopid,'&')
				uni.navigateTo({
				  url: urls//'/pages/shop/record_consumption?id='+this.shopid // 跳转到对应路径的页面 消费记录
				});
			},
			goto_recharge_record(){
				console.log('跳转:')
				let urls = this.$timestamp('/pages/shop/recharge_record?id='+this.shopid,'&')
				uni.navigateTo({
				  url: urls//'/pages/shop/recharge_record?id='+this.shopid// 跳转到对应路径的页面 充值记录
				});
			},
			goto_write_off_record_total(){
				console.log('跳转:')
				let urls = this.$timestamp('/pages/shop/write_off_record_total?id='+this.shopid,'&')
				uni.navigateTo({
				  url: urls//'/pages/shop/write_off_record_total?id='+this.shopid// 跳转到对应路径的页面 核销记录
				});
			},
			// gobindpone(){
			// 	uni.navigateTo({ //底部导航跳转方式
			// 		url: '/pages/shop/bind_phone?type=2'
			// 	});
			// },
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			toggle2(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup2.open(type)
			},
			toggle3(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup3.open(type)
			},
			getgetgift_describe() {//赠送金额使用说明
				getgift_describe(this.shopid).then((res) => {
					console.log("接口返回数据：")
					console.log(JSON.stringify(res));
					this.gift_desc = res.data;
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			getgetexchange_describe() {//兑换比例使用说明
				getexchange_describe(this.shopid).then((res) => {
					console.log("接口返回数据：")
					console.log(JSON.stringify(res));
					this.exchange_desc = res.data;
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			shopinfo(){
				userget_shop_detail(this.shopid).then((res) => {
					console.log("userget_shop_detail接口返回数据：")
					console.log(JSON.stringify(res));
					this.shopinfoarr = res.data
					let piclistarr = this.shopinfoarr.shop.lifephoto
					let piclist_goodsphoto_arr = this.shopinfoarr.shop.goods_photo
					this.cardinfo = this.shopinfoarr.card
					if(piclistarr.length >=1){
						let arrtemp = [[]]
						let arrindex = 0
						for (var i = 0; i < piclistarr.length; i++) {
							
							// console.log('当前数组长度'+arrtemp[arrindex].length)
							if(arrtemp[arrindex].length>=3){
								arrindex += 1
								arrtemp[arrindex] = []
							}
							arrtemp[arrindex].push({
									'url':piclistarr[i],
									'text':''
								})			
							// console.log(JSON.stringify(arrtemp))
						}
						
						this.piclist = arrtemp
					}
					if(piclist_goodsphoto_arr.length >=1){
						let arrtemp = [[]]
						let arrindex = 0
						for (var i = 0; i < piclist_goodsphoto_arr.length; i++) {
							
							// console.log('当前数组长度'+arrtemp[arrindex].length)
							if(arrtemp[arrindex].length>=3){
								arrindex += 1
								arrtemp[arrindex] = []
							}
							arrtemp[arrindex].push({
									'url':piclist_goodsphoto_arr[i],
									'text':''
								})			
							// console.log(JSON.stringify(arrtemp))
						}
						
						this.pic_googdsphoto_list = arrtemp
					}
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			dialogInputConfirm(){
				if(this.changeusername == '' || this.changeusername == null){
					return false
				}
				let datas = {
					realname:this.changeusername
				}
				userset_name(datas).then((res) => {
					console.log("userset_name接口返回数据：")
					console.log(JSON.stringify(res));
					if(res.code == 1000){
						uni.setStorageSync('username', this.changeusername);
						this.userusername = uni.getStorageSync('username');
					}
					
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								
							} 
						}
					});
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			// 地区
			address: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.storageAdd = e.detail.value
				this.addressvalue = this.addressinfo[0][e.detail.value[0]].name
				this.addressvalue += ' - '+this.addressinfo[1][e.detail.value[1]].name
				this.postdata.province = this.addressinfo[0][e.detail.value[0]].id
				this.postdata.city = this.addressinfo[1][e.detail.value[1]].id
				let datas = {
					province:this.postdata.province,
					city:this.postdata.city
				}
				console.log(datas)
				userchange_city(datas).then((res) => {
					console.log("userchange_city接口返回数据：")
					console.log(JSON.stringify(res));
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								
							} 
						}
					});
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			addressColumnChange(e){
				console.log('地区选择变化：')
				console.log(JSON.stringify(e.detail))
				if(e.detail.column == 0){
					console.log(this.addressinfo[0][e.detail.value].name)
					let pid = this.addressinfo[0][e.detail.value].id
					this.getshopcommongetallcity(pid)
				}else{
					console.log(this.addressinfo[1][e.detail.value].name)
				}
			},
			getshopcommongetallprovinces() {//获取省份
				shopcommongetallprovinces().then((res) => {
					console.log("接口返回数据：")
					console.log(JSON.stringify(res));
					this.addressinfo = [res.data,[]]
					if(res.data.length>=1){
						this.getshopcommongetallcity(this.addressinfo[0][0].id)
					}
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			getshopcommongetallcity(pid) {//获取城市
				shopcommongetallcity(pid).then((res) => {
					console.log("城市接口返回数据：")
					console.log(JSON.stringify(res));
					this.addressinfo[1] = res.data
					this.$forceUpdate()
				}).catch(err => {
					console.log(JSON.stringify(err))
					if(err.msg){
						uni.showModal({
							title: '提示',
							content: '数据接口报错：'+err.msg,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									// uni.switchTab({ //内部页面跳转方式 
									// 	url: '/pages/shop/shop'
									// })
								} 
							}
						});
					}
					
				})
			},
			gotoflow(type){
				uni.navigateTo({ //底部导航跳转方式
					url: '/pages/mypage/user_management_flow?typeid='+type+'&shop_id='+this.id
				});
			},
			openDialog() {
				uni.navigateTo({ //内部页面跳转方式 
					url: '/pages/shop/bind_phone'
				})
			  // uni.showModal({
			  //   // title: '提示',
			  //   content: '是否绑定',
			  //   success: function (res) {
			  //     if (res.confirm) {
			  //       console.log('确定');
					// uni.navigateTo({ //内部页面跳转方式
					// 	url: '/pages/shop/bind_phone'
					// })
			  //     } else if (res.cancel) {
			  //       console.log('取消');
			  //     }
			  //   }
			  // });
			},
			//输入对话框 修改名字
			name_edit() {
				this.$refs.nameDialog.open()
			},
			//输入对话框 修改手机号
			// phone_edit() {
			// 	this.$refs.phoneDialog.open()
			// },
			showpicwx(index){ //微信二维码放大图片
				let listpic = this.shopinfoarr.shop.avatar
				uni.previewImage({
				        current: this.shopinfoarr.shop.avatar[index], // 当前显示图片的http链接
				        urls: listpic// 需要预览的图片http链接列表
				      });
			},
			showpic(index,indexs){ //点击后放大图片 并左右滑动
				let listpic = []
				let showpic = this.piclist[index][indexs].url
				for (var i = 0; i < this.piclist.length; i++) {
					for (var j = 0; j < this.piclist[i].length; j++) {						
						listpic.push(this.piclist[i][j].url)
					}					
				}
				uni.previewImage({
				        current: showpic, // 当前显示图片的http链接
				        urls: listpic // 需要预览的图片http链接列表
				      });
			},
			showpropic(index,indexs){ //点击后放大图片 并左右滑动
				let listpic = []
				let showpic = this.pic_googdsphoto_list[index][indexs].url
				for (var i = 0; i < this.pic_googdsphoto_list.length; i++) {
					for (var j = 0; j < this.pic_googdsphoto_list[i].length; j++) {						
						listpic.push(this.pic_googdsphoto_list[i][j].url)
					}					
				}
				uni.previewImage({
				        current: showpic, // 当前显示图片的http链接
				        urls: listpic // 需要预览的图片http链接列表
				      });
			},
			// 店铺筛选
			change(e) {
				console.log("e:", e);
				
				// let {
				// 	index
				// } = e.detail
				// this.list[index].badge && this.list[index].badge++
				// uni.showToast({
				// 	title: `点击第${index+1}个宫格`,
				// 	icon: 'none'
				// })
			},
			add() {
				if (this.dynamicList.length < 9) {
					this.dynamicList.push({
						url: `/static/c${this.dynamicList.length+1}.png`,
						text: `Grid ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			}
			
		}
	};
	
</script>

<style lang="scss">
	.content{
		// padding: 30rpx;
		position: relative;
		.bg-radius{
			margin-bottom: 30rpx;
			border-radius: 30rpx;
			box-sizing: border-box;
			// margin-top: 30rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, .1);
			color: #101010;
			background-color: #fff;
			overflow: hidden;
		}
		.code{
			align-items: center;
			margin: 60rpx 0;
			img{
				max-width: 100%;
			}
			input{
				border-radius: 12rpx;
				border: 1px solid #d4d4d4;
				margin: 0 30rpx;
			}
			.flex-item:first-child{
				width: 15%;
			}
			.flex-item:last-child{
				width: 35%;
				text-align: center;
				font-size: 28rpx;
			}
			.code-btn{
				background: linear-gradient(145deg, rgba(250,225,1,1), rgba(240,140,6,1));
				padding: 20rpx 0;
				color: #fff;
				border-radius: 40rpx;
			}
		}
		@mixin flex {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
		}
		@mixin height {
			/* #ifndef APP-NVUE */
			height: 100%;
			/* #endif */
			/* #ifdef APP-NVUE */
			flex: 1;
			/* #endif */
		}
		.popup-content {
			@include flex;
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 50px;
			color: #000;
			font-size: 28rpx;
			overflow: hidden;
			background-color: #fff;
		
			width: 600rpx;
			
		}
		.popup-height {
			@include height;
			width: 200px;
		}
		// 会员概况
		.swiper2{
			height: 490rpx;
			display: block;
			overflow: hidden;
		}
		.member-profile{
			background: url("https://m.qpic.cn/psc?/89b9a87a-bf34-461a-b3f4-c9d87dfe5e02/LiySpxowE0yeWXwBdXN*Sbk7GZxmB3gKqpmHlBIx7WuzdgpG.bnnHEcJMqAw2iKJN1GhIaAZdsAJR*YxHZte9hVzLTxnLHGrhHvPBGdens8!/b&bo=UQKnAFECpwADByI!&rf=viewer_4") no-repeat bottom;
			// background: url("/static/img/vip_b.png") no-repeat bottom;
			background-size: 90%;
			height: 500rpx;
			position: relative;
			margin: 20rpx 0 30rpx;
			text{
				display: block;
				font-size: 28rpx;
				color: #907250;
				margin-bottom: 10rpx;
			}
			.profile{
				// position: absolute;
				// top: 0;
				// right: 0;
				// left: 0;
				// bottom: 0;
				// height: 440rpx;
				// padding: 100rpx 120rpx;
				position: relative;
				.profile-info{
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					padding: 60rpx 110rpx;
				}
				text{
					margin-bottom: 20rpx;
				}
			}
			.swiper-item{
				text-align:center;
				img{
					// margin-top: 80rpx;
					max-width: 90%;
				}
			}
		}
			
		
		
		
		.uni-list-chat{
			padding: 20rpx 20rpx 0;
			background-color: transparent;
		}
		.uni-list{
			background-color: transparent;
		}
		.uni-list:after{
			background-color: transparent;
		}
		.my-shop-hd{
			height: 280rpx;
			background: url("https://m.qpic.cn/psc?/89b9a87a-bf34-461a-b3f4-c9d87dfe5e02/LiySpxowE0yeWXwBdXN*SZDR9h0yatiJp0B8NC8OuLQtzfxK2WLX.JM59OTXj9wBL2I9Ex3mKfwuaR4tHT3vp57NQvtPdWE*0TvjxW66vSY!/b&bo=7gJAAe4CQAEDByI!&rf=viewer_4") no-repeat center bottom;
			// background: url("/static/img/my_bg.png") no-repeat center bottom;
			background-size: 100%;
			position: relative;
			
			.my-card{
				padding: 30rpx 50rpx;
				color: #f5c481;
				position: relative;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				.my-card-icon{
					margin-right: 20rpx;
					width: 10%;
				}
				.my-card-info{
					width: 65%;
					display: flex;
					align-items: center;
					text{
						display: block;
					}
				}
				.instructions{
					width: 25%;
					text-align: right;
					color: #734000;
					border-color: #f5c481;
					background-color: #f5c481;
					border-radius: 30rpx;
					padding: 10rpx 20rpx ;
				}
				
			}
			
			.user-info{
				position: relative;
				.phone-edit{
					position: absolute;
					right: 40rpx;
					color: #fff;
					text-align: center;
					
					top: 44rpx;
					width: 60rpx;
					height: 60rpx;
					line-height: 54rpx;
					border-radius: 60rpx;
					background-color: rgba(0, 0, 0, .2);
				}
				.city{
					position: absolute;
					right: 30rpx;
					top: 44rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: rgba(255, 255, 255, .8);
					background-color: rgba(0, 0, 0, .2);
					border-radius: 40rpx;
					padding: 2rpx 16rpx;
				}
			}
		}
		
		
		
		.cus-parallel-tit{
			width: 25%;
			position: relative;
			&:before{
				content: "";
				position: absolute;
				background-color: rgba(0, 0, 0, .07);
				width: 2rpx;
				top: 24rpx;
				bottom: 24rpx;
				right: 0;
			}
		}
		
		
		
		// 店铺图片
		// .shop-portrait{
		// 	background-color: #f5ead8;
		// 	display: flex;
		// 	padding: 16rpx;
		// 	align-items: center;
		// 	margin-top: 30rpx;
		// 	img{
		// 		display: block;
		// 		margin: 2%;
		// 		max-width: 96%;
		// 	}
		// }
		.image {
			// width: 25px;
			// height: 25px;
			display: block;
			// margin: 2%;
			// max-width: 96%;
			height: auto;
			
			width: 100px;
			height: 100px;
			
		}
		
		// .text {
		// 	font-size: 14px;
		// 	margin-top: 5px;
		// }
				
		.example-body {
			/* #ifndef APP-NVUE */
			// display: block;
			/* #endif */
		}
				
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
				
		.grid-item-box {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// padding: 15px 0;
		}
				
		.grid-item-box-row {
			flex: 1;
			// position: relative;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
		}
				
		.grid-dot {
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}
				
		.swiper {
			height: 260rpx;
			display: block;
			margin-bottom: -20rpx;
			// margin-top: 20rpx;
		}
		// 我的
		.grid{
			.grid-item-box{
				justify-content: center;
				text-align: center;
			}
			.uni-grid-item{
				padding: 10rpx 0 10rpx;
				.grid-icon{
					text-align: center;
					width: 80rpx;
					height: 80rpx;
					margin: 0 auto;
					border-radius: 40rpx;
					line-height: 80rpx;
					margin-bottom: 20rpx;
				}
				text{
					font-size: 24rpx;
				}
				.xfjl{
					color: #02b679;
					background-color: #e5f8f2;
				}
				.czjl{
					color: #ff8f1f;
					background-color: #fcf2e8;
				}
				.hxjl{
					color: #e41e2b;
					background-color: #fce8e9;
				}
				
			}
			
			
		}
		// 商家资料
		.shop-info{
			// .shop-info-hd{
			// 	display: block;
			// 	padding: 30rpx;
			// 	height: 50rpx;
			// 	line-height: 60rpx;
			// 	background-color: #fff;
			// 	position: relative;
			// 	&::after{
			// 		content: "商家资料";
			// 		background-color: #fff;
			// 		position: absolute;
			// 		width: 300rpx;
			// 		left: 50%;
			// 		margin-left: -150rpx;
			// 		text-align: center;
			// 		color: #caa68c;
			// 		font-size: 44rpx;
			// 	}
			// 	&:before{
			// 		background: url("@/static/img/shop-info-hd-bg.png") repeat-x;
			// 		left: 10%;
			// 		right: 10%;
			// 		top: 36rpx;
			// 		bottom: 20rpx;
			// 		content: "";
			// 		position: absolute;
			// 	}
			// }
			.beforestyle{
				&:before{
					content: "";
					border: 4px solid #f8eee4;
					position: absolute;
					left: 20rpx;
					top: 78rpx;
					right: 20rpx;
					bottom: 20rpx;
				}
			}
			.shop-info-box{
				padding: 30rpx;
				background-color: #fff;
				position: relative;
				// &:before{
				// 	content: "";
				// 	border: 4px solid #f8eee4;
				// 	position: absolute;
				// 	left: 20rpx;
				// 	top: 20rpx;
				// 	right: 20rpx;
				// 	bottom: 20rpx;
				// }
				.info-title{
					margin-bottom: 16rpx;
				}
				.piclist_title{
					margin-bottom: 20rpx;
				}
				.distance{
					position: absolute;
					top: 24rpx;
					right: 22rpx;
					font-size: 24rpx;
					color: #666;
					image{
						width: 50rpx;
						height: 50rpx;
						display: inline-block;
						vertical-align: middle;
						margin-left: 10px;
					}
				}
			}
		}
		// 粉丝社群
		.fan-community{
			.fan-community-hd{
				display: block;
				padding: 30rpx 30rpx 16rpx;
				height: 60rpx;
				line-height: 60rpx;
				// background-color: #fff;
				position: relative;
				&::after{
					content: "粉丝社群";
					// background-color: #fff;
					position: absolute;
					width: 300rpx;
					left: 50%;
					margin-left: -150rpx;
					text-align: center;
					color: #1f1f1f;
					font-size: 44rpx;
				}
				&:before{
					background: url("@/static/img/fan-community-hd-bg.png") no-repeat center center;
					// background-size: 50%;
					left: 10%;
					right: 10%;
					top: 36rpx;
					bottom: 20rpx;
					content: "";
					position: absolute;
				}
			}
			.fan-community-box{
				border: 1px solid #ddc7b0;
				// margin: 0 30rpx 30rpx;
				padding: 30rpx;
				margin-bottom: 100rpx;
				display: flex;
				align-items: ‌flex-start;
				.box-hd{
					width: 400rpx;
					margin-right: 30rpx;
					img{
						max-width: 100%;
					}
				}
				.box-bd{
					font-size: 28rpx;
					text{
						display: block;
					}
				}
			}
		}
		.swiper3{
			height: 200rpx;
			display: block;
			overflow: hidden;
		}
	}
	@font-face {
		font-family: CustomFont;
		src: url('/static/fonts/iconfont.ttf');
	}
	
	page{
		background-color: #f6f6f6;
	}
	
	.uni-list-chat__header{
		border-radius:50% !important
	}
	.uni-list-chat__header-image{
		margin:0 !important
	}
	.uni-list-chat__content-title{
		color:#ffffff !important
	}
	.uni-list-chat__content-note{
		color:#ffffff !important
	}
	.uni-list-item__container{
		padding:10px 15px !important
	}
	.uni-list-item__content-note{
		color:#101010 !important;
		font-size:14px !important
	}
	.fonts{
		font-size: 26rpx;
	}
	.pd-30{
		padding: 30rpx 0;
	}
	
	
</style>
